button,
.btn {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var(--text-normal);
	background-color: var(--background-primary);
	border-radius: var(--radius-s);
	box-shadow: 0 0 0 1px var(--background-modifier-border);
	font-size: var(--font-ui-smaller);
	height: var(--input-height);
	user-select: none;
	-webkit-user-select: none;
	padding: 0.25rem 0.75rem;
	white-space: nowrap;
	outline: none;
	border: none;
	text-decoration: none;

	&:disabled {
		opacity: 0.67;
		cursor: not-allowed;
	}
	.is-mobile & {
		padding: 0.25rem 1rem;
	}
	&:not(.clickable-icon) {
		background-color: var(--interactive-normal);
		box-shadow: var(--input-shadow);
	}
	@media (hover: hover) {
		&:hover {
			background-color: var(--interactive-hover);
			box-shadow: var(--input-shadow-hover);
		}
	}
	&:active,
	&:focus {
		box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
		transition:
			box-shadow .15s ease-in-out;
	}
	&.mod-cta {
		background-color: var(--interactive-accent);
		color: var(--text-on-accent);
		@media (hover: hover) {
			&:hover {
				background-color: var(--interactive-accent-hover);
			}
		}
		&:active,
		&:focus {
			box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
			transition:
				box-shadow .15s ease-in-out;
		}
	}
}

.clickable-icon,
button.clickable-icon {
	width: var(--clickable-icon-size);
	height: var(--clickable-icon-size);
	display: flex;
	padding: 0 0.25rem;
	background-color: transparent;
	color: var(--text-muted);
	opacity: 0.85;
	align-self: center;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	@media (hover: hover) {
		&:hover {
			color: var(--text-normal);
			background-color: var(--background-modifier-hover);
			opacity: 1;
			box-shadow: none;
		}
	}
	&[disabled] {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.add-btn {
	padding: 2px 0 8px;
	margin-inline-start: -2px;
	font-weight: 500;
	color: var(--text-normal);
	font-size: var(--font-ui-small);
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	a {
		cursor: pointer;
		border-radius: var(--radius-s);
		padding: 6px 8px;
		@media (hover: hover) {
			&:hover {
				background-color: var(--background-modifier-hover);
			}
		}
	}
}